<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/返选</title>
    <style>
      body,
      dl,
      dt,
      dd,
      p {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Tahoma;
        font-size: 12px;
      }
      label,
      input,
      a {
        vertical-align: middle;
      }
      label {
        padding: 0 10px 0 5px;
      }
      a {
        color: #09f;
        text-decoration: none;
      }
      a:hover {
        color: red;
      }
      dl {
        width: 120px;
        margin: 10px auto;
        padding: 10px 5px;
        border: 1px solid #666;
        border-radius: 5px;
        background: #fafafa;
      }
      dt {
        padding-bottom: 10px;
        border-bottom: 1px solid #666;
      }
      dt label {
        font-weight: 700;
      }
      p {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>
        <input type="checkbox" id="checkAll" /><label>全选</label
        ><a href="javascript:;">反选</a>
      </dt>
      <dd>
        <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（二）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（三）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（四）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（五）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（六）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（七）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（八）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（九）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（十）</label></p>
      </dd>
    </dl>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
    <script>
      //所有选项
      let selects = document.querySelectorAll("input[name=item]");
      //全选/取消全选选项
      let checkAllIpt = document.querySelector("#checkAll");
      //反选按钮
      let invertEle = document.querySelector('dt a')
      let dd = document.querySelector('dd')
      //初始化选项状态
      let state = getState();
      /*{
        //所有选项选择的状态，是一个数组
        selectionState:[true,false,....]
        //是否所有选项被选中
        isAllSelected:false
      }*/

      function getState(){
        //所有选项选择的状态，是一个数组
        let selectionState = []
        selects.forEach(function(el){
          selectionState.push(el.checked)
        })
        //是否所有都被选中
        let isAllSelected = selectionState.every(function(el){
          return el == true
        })
        //自动更新全选输入框的状态以及文字
        changeCheckAll(isAllSelected)
        return {selectionState,isAllSelected}
      }
      // let array = [true,true,false]
      // // let flag = true
      // // for(let c of array){
      // //   flag = flag && c
      // // }
      // function isAllTrue(array){
      //   for( let c of array){
      //     if(!c){
      //       return false
      //     }
      //   }
      //   return true
      // }

      dd.addEventListener('change',function(e){
        state = getState()
        // let ipt = e.target
        
      })
      //设置全选按钮以及文字，当全选自动改变时候调用此函数
      function changeCheckAll(flag){
        checkAllIpt.checked = flag
        checkAllIpt.nextElementSibling.innerText = flag ? '全不选' : '全选'
        // if(flag == true){
        //   checkAllIpt.nextElementSibling.innerText = '全不选'
        // }else{
        //   checkAllIpt.nextElementSibling.innerText = '全选'
        // }
      }

      // checkAllIpt.addEventListener('change',function(){
      //   if(checkAllIpt.checked == true){
      //     //选中所有
      //     selectAll()
      //   }else{
      //     //取消素有
      //     cancelAll()
      //   }
      // })

      // function selectAll() {
      //   changeCheckAll(true)
      //   selects.forEach(function(select) {
      //     select.checked = true;
      //   });
      // }

      // function cancelAll() {
      //   changeCheckAll(false)
      //   selects.forEach(function(select) {
      //     select.checked = false;
          
      //   });
      // }
      checkAllIpt.addEventListener('change',function(){
        setAll(checkAllIpt.checked)
      })
      //设置所有，当全选按钮手动改变时调用此函数
      function setAll(flag){
        selects.forEach(function(select) {
          select.checked = flag;
        });
        //更新状态
        state = getState()
      }
      //反转
      function invert() {
        selects.forEach(function(el){
          el.checked = !el.checked
        })
        //更新状态
        state = getState()
      }
      //selectionState:[true,false,true,true,....]
      //selects:[input,input,input,input]
      invertEle.addEventListener('click',invert)
    </script>
  </body>
</html>
